<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: #ccc;
        }
        
        #am3 {
            background: #fff;
            border: 1px solid blue
        }
        
        #can3-image {
            display: none
        }
    </style>
    <script src="./js/fabric.js"></script>

</head>

<body>

    <!-- <canvas id='am1' width="400" height="400"></canvas> -->
    <!-- <canvas id='am2' width="800" height="400"></canvas> -->
    <!-- <div id="main">
                <canvas id='am3' width="800" height="800"></canvas>
                <img id="can3-image" src="./image/blue3.jpg" alt="fabric">
        </div> -->
    <!-- <div id="main">
                <canvas id='am32' width="800" height="800"></canvas>
        </div> -->
    <!-- <canvas id='am4' width="800" height="400"></canvas> -->
    <!-- <canvas id='am5' width="800" height="400"></canvas> -->
    <!-- <canvas id='am6' width="800" height="400"></canvas> -->
    <!-- <canvas id='am7' width="800" height="400"></canvas> -->
    <canvas id='am8' width="800" height="400"></canvas>
    <canvas id='am9' width="800" height="400"></canvas>
    <canvas id='am10' width="800" height="400"></canvas>
    <canvas id='am11' width="800" height="400"></canvas>
    <canvas id='am12' width="800" height="400"></canvas>
    <canvas id='am13' width="800" height="400"></canvas>
    <script>
        // demo01
        // var can1 = new fabric.Canvas('am1');
        // var rect = new fabric.Rect({
        //     left:100,
        //     width:100,
        //     fill:'red',
        //     width:30,
        //     height:30
        // })
        // can1.add(rect)

        //demo02
        // var can2 = new fabric.Canvas('am2')
        // var rect = new fabric.Rect({
        //     left:100,
        //     width:100,
        //     fill:'red',
        //     width:30,
        //     height:30
        // })
        // var circle = new fabric.Circle({
        //     radius:50,
        //     fill:'blue',
        //     left:200,
        //     top:100
        // })
        // var tri = new fabric.Triangle({
        //     width:100,
        //     height:60,
        //     fill:'green',
        //     top:100,
        //     left:500
        // })
        // can2.add(rect)
        // can2.add(circle)
        // can2.add(tri)

        //demo03-01  放image 标签
        // var can3 = new fabric.Canvas('am3')
        // var imageElement = document.getElementById('can3-image')
        // var inageF = new fabric.Image(imageElement,{
        //     left:100,
        //     top:100,
        //     width:200,
        //     height:200,
        //     angle:50
        // })
        // can3.add(inageF)  


        /**********demo03-02  不放image 标签*********/
        //  var can3_2 = new fabric.Canvas('am32')
        //  fabric.Image.fromURL('./image/blue3.jpg',function(oImg){
        //         oImg.scale(0.1)
        //         can3_2.add(oImg)
        //  })

        /**  demo 4 绘制不规则图形 复杂图形可以用svg导入  **/
        // var can4 = new fabric.Canvas('am4')
        // // M 移动到 0 0 点 L 连线到200 100 连线到170 200 z 闭合
        // var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z')
        // // left top 设置起点位置  fill 填充颜色
        // path.set({
        //     left:100,
        //     top:30,
        //     fill:'red'
        // })
        // can4.add(path)


        /******** demo05 动画 ********/
        //   var can5 = new fabric.Canvas('am5')
        //   var rect = new fabric.Rect({
        //       left:100,
        //       top:50,
        //       width:200,
        //       height:200,
        //       fill:'blue'
        //   })
        //   rect.animate('left',500,{
        //       onChange:can5.renderAll.bind(can5),
        //       duration:2000,
        //       easing:fabric.util.ease.easeOutCubic
        //   })
        //   can5.add(rect)

        /************demo06 图像过滤器 ***********/
        // var can6 = new fabric.Canvas('am6')
        // fabric.Image.fromURL('./image/blue3.jpg',function(img){
        //     //增加过滤器效果
        //     img.filters.push(
        //         new fabric.Image.filters.Sepia(),
        //         new fabric.Image.filters.Brightness({brightness:100})
        //     );
        //     // 应用过滤器   失败
        //     img.applyFilters(can6.renderAll.bind(can6))
        //     can6.add(img)
        // })

        /****************demo07 颜色转换****************/
        // var can7 = new fabric.Canvas('am7')
        // var color1 = new fabric.Color('#ccc')
        // var color2 = new fabric.Color('#123525')
        // var color3 = new fabric.Color('123525')
        // var color4 = new fabric.Color('rgb(100,0,100)')
        // var color5 = new fabric.Color('rgba(100,0,1,0.6)')
        // var color6 = color1.toRgb() //抓换成rgb格式
        // color7 = color5.toHex() //转换成16进制
        // var color8 = color1.overlayWith(color2).toRgb()
        // console.log(color6,color7)
        // var rect = new fabric.Rect({
        //     left:50,
        //     top:50,
        //     width:100,
        //     height:100,
        //     fill:color3.toRgb()
        // })
        // can7.add(rect)


        /****************demo08 颜色渐变****************/

        var can8 = new fabric.Canvas('am8')
            // 竖向渐变
        var cir = new fabric.Circle({
            left: 20,
            top: 20,
            radius: 100,
            // 边框宽度
            strokeWidth: 1,
            // 边框色
            stroke: 'red'
        })
        cir.setGradient('fill', {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: cir.height,
                colorStops: {
                    0: '#000',
                    1: '#fff'
                }
            })
            // 横向渐变
        var cir2 = new fabric.Circle({
            left: 260,
            top: 20,
            radius: 100,
            strokeWidth: 1,
            // 边框色
            stroke: 'yellow'
        })
        cir2.setGradient('fill', {
            x1: 0,
            y1: 0,
            x2: cir.width,
            y2: 0,
            colorStops: {
                0: 'blue',
                0.5: 'pink',
                1: 'green'
            }
        })
        var cir3 = new fabric.Circle({
                left: 440,
                top: 20,
                radius: 100,
                strokeWidth: 1,
                // 边框色
                stroke: 'yellow'
            })
            // 彩虹渐变
        cir3.setGradient('fill', {
            x1: 0,
            y1: 0,
            x2: cir.width,
            y2: 0,
            colorStops: {
                0: 'red',
                0.2: 'orangle',
                0.4: 'yellow',
                0.6: 'green',
                0.8: 'blue',
                1: 'purple'
            }
        })
        can8.add(cir)
        can8.add(cir2)
        can8.add(cir3)



        /**************demo 09***文本设置************/
        var can9 = new fabric.Canvas('am9')
        var text1 = new fabric.Text('nihao fabric', {
            left: 0,
            top: 100,
            fontSize: 10,
            // 这两项设置未生效
            textDecoration: 'overline',
            fontFamily: 'Comic Sans',

        })
        can9.add(text1)

        /**************demo10 fabric事件监听**************/
        var can10 = new fabric.Canvas('am10')
            // 监听鼠标按下时机，第二个参数为执行函数 mouse:move 鼠标移动事件  after:render 画布渲染时 selected 选中时
            //      can10.on('mouse:down', function(options) {
            //     console.log(options.e.clientX, options.e.clientY)
            // })
        var rect = new fabric.Rect({
            left: 0,
            top: 0,
            width: 100,
            height: 100,
            fill: 'red'
        })
        var cir10 = new fabric.Circle({
            left: 200,
            top: 100,
            radius: 100,
            fill: 'blue'
        })
        cir10.on('selected', function() {
            console.log('selected a circle')
        })
        rect.on('selected', function() {
            console.log('selected a rect')
        })
        can10.add(rect, cir10)

        /**************demo11 fabric分组绘制**************/

        var can11 = new fabric.Canvas('am11');
        /*********文本图形组合***********/
        // var circle = new fabric.Circle({
        //     radius: 100,
        //     fill: 'green',
        //     scaleY: 0.5,
        //     originX: 'center',
        //     originY: 'center'
        // });


        // var text = new fabric.Text('Hello Jspang!', {
        //     fontSize: 30,
        //     originX: 'center',
        //     originY: 'center'
        // })


        // var group = new fabric.Group([circle, text], {
        //     left: 10,
        //     top: 10,
        //     angle: 10
        // });
        // console.log(group.item(0))
        //     // group.item(0).setFill('red');
        // group.item(0).set({
        //     fill: 'red'
        // });
        // group.item(1).set({
        //     text: 'Hello World!',
        //     fill: 'white'
        // });
        // can11.add(group);
        var canvas = new fabric.Canvas('canvas');
        /***************多个图形组合*******************/
        // var circle1 = new fabric.Circle({
        //     radius: 50,
        //     fill: 'red',
        //     left: 0
        // });


        // var circle2 = new fabric.Circle({
        //     radius: 50,
        //     fill: 'yellow',
        //     left: 100
        // });

        // var circle3 = new fabric.Circle({
        //     radius: 50,
        //     fill: 'green',
        //     left: 200
        // });

        // var group = new fabric.Group([circle1, circle2, circle3], {
        //     left: 200,
        //     top: 100
        // });
        // can11.add(group);
        /******************多个图片组合************************/


        fabric.Image.fromURL('./image/blue3.jpg', function(img) {
            var img1 = img.scale(0.1).set({
                left: 100,
                top: 100
            });

            fabric.Image.fromURL('./image/blue3.jpg', function(img) {
                var img2 = img.scale(0.1).set({
                    left: 175,
                    top: 175
                });

                fabric.Image.fromURL('./image/blue3.jpg', function(img) {
                    var img3 = img.scale(0.1).set({
                        left: 250,
                        top: 250
                    });

                    can11.add(new fabric.Group([img1, img2, img3], {
                        left: 200,
                        top: 200
                    }));
                });
            });
        });


        /**************demo12 分组绘制2***************/
        var can12 = new fabric.Canvas('am12');
        // 在已有组合新增元素
        // var circle = new fabric.Circle({
        //     radius: 50,
        //     fill: 'green',
        //     top: 100,
        //     left: 200,

        // });

        // var rect = new fabric.Rect({
        //     left: 100,
        //     top: 100,
        //     width: 100,
        //     height: 100,
        //     fill: 'red'
        // });
        // var group = new fabric.Group([circle, rect], {
        //     left: 150,
        //     top: 100,
        //     angle: 10
        // });
        // console.log(group.top)
        // group.addWithUpdate(new fabric.Rect({
        //     fill: 'blue',
        //     // top: group.getTop() + 50,
        //     // left: group.getLeft() + 100,
        //     top: group.top + 50,
        //     left: group.left + 100,
        //     width: 100,
        //     height: 100,
        //     originX: 'center',
        //     originY: 'center'
        // }));

        // can12.add(group);

        // var rect = new fabric.Rect({
        //     left: 100,
        //     top: 100,
        //     width: 100,
        //     height: 100,
        //     fill: 'red'
        // });

        // var circle = new fabric.Circle({
        //     left: 200,
        //     top: 100,
        //     radius: 50,
        //     fill: 'blue'
        // });
        // can12.add(rect);
        // can12.add(circle);


        // var group = new fabric.Group([
        //     can12.item(0).clone(),
        //     can12.item(1).clone()
        // ]);
        // can12.clear().renderAll();



        // can12.add(group)


        /*************demo13**序列化*************/
        var can13 = new fabric.Canvas('am13');
        can13.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}');
    </script>
</body>

</html>